<template>
    <div style="background-color: rgb(241, 241, 241);padding:5px;padding-right: 7px;min-height: 100vh;box-sizing: border-box;">
        <van-nav-bar title="商品详情" left-text="返回" left-arrow fixed @click="$router.push('/home')" >
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <div style="height: 50px;"></div>
        <div style="background-color: #fff;">
            <img :src="goodsInfo.pic_url" alt="" style="width:100%;height: 300px;">
            <div style="padding: 10px;">
                <p style="color:#1BAEAE;height: 30px;line-height: 30px;font-size: 22px;">￥{{ goodsInfo.price && goodsInfo.price.toFixed(2) }}
                </p>
                <p style="height: 30px;line-height: 30px;margin-top: 10px;font-size: 18px;font-weight: bold;">{{
                    goodsInfo.name }}</p>
                <p style="height: 30px;line-height: 30px;margin-top: 10px;font-size: 14px;color: #999;">品牌商:{{
                    goodsInfo.brand }}</p>
                <p style="height: 30px;line-height: 30px; font-size: 14px; color: #999;">库存:{{ goodsInfo.stock }}
                    <span style="float: right;">免邮费，顺丰快递</span>
                </p>

                <div style="margin-top: 20px;">
                    <p style="text-align: center;font-weight: 500;">商品细节</p>
                    <p style="margin-top: 10px;">{{ goodsInfo.detail_info }}</p>
                </div>
            </div>
        </div>

        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" dot />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="cartStore.num?cartStore.num:''" @click="$router.push('/cart')"/>
            <van-action-bar-icon :icon="isLove?'star':'star-o'"  :text="isLove?'已收藏':'收藏'" color="#1BAEAE" @click="collect" />
            <van-action-bar-button  text="加入购物车" style="background-color: #5ac5c5;color: #fff;" @click="addGoods()"/>
            <van-action-bar-button  text="立即购买" style="background-color: #1BAEAE;color: #fff;" @click="toBuy"/>
        </van-action-bar>
    </div>
</template>

<script setup>
import { useRoute,useRouter } from 'vue-router'
import { ref, reactive,watch } from 'vue'
import useCartStore from '@/store/useCartStore'
import { addToCart,editCart,addCollection,delCollection } from '../../api/index'; 

let cartStore = useCartStore()
let router = useRouter()
let isLove = ref(false)
let route = useRoute()

let curGoodsId=route.params.goodsId
let goodsInfo = reactive({})
import { getGoodsDetail } from '../../api/index'
//获取商品详情
getGoodsDetail({ id: curGoodsId }).then(res => {
    // console.log(res)
    if (res.code == 1) {
        Object.assign(goodsInfo, res.data)
        isLove.value=res.data.is_collect
      
    }
})

//获取购物车信息
cartStore.getCartInfo()

// 添加到购物车
function addGoods(){
    let res = cartStore.goodsData?.find(item=>item.goods_id==curGoodsId)
    if(res){
        editCart({goodsId:curGoodsId,count:res.count+1,id:res.id}).then(res=>{
            if(res.code==1){
                cartStore.getCartInfo()
            }
        })
    }else{
        addToCart({goodsId:curGoodsId,count:1}).then(res=>{
            if(res.code==1){
                cartStore.getCartInfo()
            }
        })
    }
}
//添加和取消收藏

async function  collect(){
    if(isLove.value){
       await delCollection({object_id:curGoodsId,type:1})
    }else{
       await addCollection({object_id:curGoodsId,type:1})
    }
    getGoodsDetail({id:curGoodsId}).then(res=>{
        if(res.code==1){
          isLove.value=res.data.is_collect
        }
})
}

//跳转到地址页面生成订单
function toBuy(){
    //存入商品id
    localStorage.setItem('curGoodsId',route.params.goodsId) 
    router.push({
        path:'/address',
        query:{
            orderInfo:btoa(encodeURI(
                 JSON.stringify(
                {
                goods:[{
                    goods_id:goodsInfo.id,
                    count:1,
                    goodsInfo,
                }],
                price:goodsInfo.price
            }
            ) 
            ))
           
        }
    })
}



</script>

<style scoped>
   :deep() .van-action-bar .van-badge{
        background-color: #1BAEAE;
    }
    :deep() .van-nav-bar .van-icon{
    color: #0c9595;
    font-weight: bolder;
}
    :deep() .van-nav-bar .van-nav-bar__text{
    color: #1BAEAE;
    font-weight: bolder;
}
</style>